<template>
    <div class="ep-insurance">
        <div class="ep-title">当前参保险种</div>
        <ul>
            <li :style="{ backgroundColor : item === '120' || item === '110' || item === '170' ? '#0E99FF' : item === '310' || item === '330' ? '#4CA750' : item === '510' ? '#EC4644' : item === '410' ? '#9F85FF' : '#E5D936', marginRight: index === 1 || index === 3 || index === 5 || index === 7 ? '0' : '' }"
                v-for="(item, index) in insurance" :key="index">
                <i class="ep-icon"
                   :class="item === '110' || item === '120' || item === '170' ? 'ep-yl-icon' : item === '310' || item === '320' ? 'ep-jbyl-icon' : item === '510' ? 'ep-sy-icon' : item === '410' ? 'ep-gs-icon' : 'ep-sybx-icon'"></i>
                <span>{{ item | insuranceType }}</span>
            </li>
        </ul>
    </div>
</template>

<script type="es6">
    export default {
        props: {
            functionId: {
                type: String,
                default: 'person'
            },
            panel: {
                type: Object,
                default: function () {
                    return null
                }
            }
        },
        data() {
            return {
                insurance: []
            }
        },
        computed: {
            companyid() {
                return this.$store.getters.companyid;
            },
            backFun() {
                return this.$store.getters.backFun;
            }
        },
        watch: {
            companyid: {
                handler(value) {
                    this.getUserInformation(value);
                },
                deep: true
            },
            backFun: {
                handler(value) {
                    if (value === null) return;
                    let backFun = [];
                    backFun = value.split(',');
                    if (backFun.indexOf('rDoInit') >= 0) {
                        this.insurance = [];
                    }
                }
            },
            panel: {
                handler(value) {
                    this.insurance = [];
                    for (let i in value.cpInsure) {
                        this.insurance.push(value.cpInsure[i].aae140);
                    }
                }
            }
        },
        methods: {
            /**
             * 获取单位注销信息
             */
            getUserInformation(value) {
                let params = {
                    panel: {
                        psInfo: {},
                        psInsure: [],
                        cpInfo: {},
                        cpInsure: [],
                        functionid: this.functionId
                    },
                    commonSearch_info: {
                        personInfo: value.aac001,
                        companyInfo: value.aab001
                    },
                    ...value.data,
                    path: this.$route.path
                };
                this.$api.commonPost(this.$route.path + '/doCheck/commonSearch_info/', params).then(res => {
                    if (res.status === '0') {
                        this.data = res.data.panel.cpInfo || {};
                        this.insurance = [];
                        for (let i in res.data.panel.cpInsure) {
                            this.insurance.push(res.data.panel.cpInsure[i].aae140);
                        }
                    } else if (res.successMessage && res.successMessage.length > 0) {
                        res.successMessage.map(item => {
                            this.$message({
                                type: 'success',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.errorMessage && res.errorMessage.length > 0) {
                        res.errorMessage.map(item => {
                            this.$message({
                                type: 'error',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    } else if (res.warnMessage && res.warnMessage.length > 0) {
                        res.warnMessage.map(item => {
                            this.$message({
                                type: 'warning',
                                message: item,
                                duration: 0,
                                showClose: true
                            })
                        })
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .ep-insurance {
        width: 240px;
        border-radius: 6px;
        background: #fff;
        margin-left: 10px;
        padding: 10px 10px 0 10px;
        ul {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 0;
            margin-top: 10px;
            li {
                width: 43%;
                border-radius: 4px;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
                font-size: 13px;
                display: flex;
                align-items: center;
                padding: 5px;
                margin: 0 10px 10px 0;
                color: #fff;
                span {
                    padding-left: 5px;
                }
            }
        }
    }

    .ep-icon {
        width: 20px;
        height: 20px;
        display: inline-block;
    }
</style>